<template>
  <div class="booking-gallery">

    <!-- 滚动通知 -->
    <div class="notice-banner">
      <div class="notice-icon">📢</div>
      <div class="notice-content">
        <div class="scrolling-text">
          VR体验名额有限，建议提前预约 | 每场体验时长约30分钟 | 建议12岁以上观众参与 | 免费预约，先到先得
        </div>
      </div>
    </div>

    <!-- 门票预约区域 -->
    <div class="ticket-section">

      <div class="ticket-container">
        <div class="ticket-card" v-for="ticket in ticketList" :key="ticket.id">
          <div class="ticket-image">
            <img 
              :src="ticket.image" 
              :alt="ticket.name"
              class="ticket-img"
              @load="onTicketImageLoad(ticket.id)"
              @error="onTicketImageError(ticket.id)"
            />
            <div class="ticket-badge">
              <span class="badge-text">{{ ticket.badge }}</span>
            </div>
          </div>
          <div class="ticket-content">
            <div class="ticket-header">
              <h4 class="ticket-name">{{ ticket.name }}</h4>
              <div class="ticket-meta">
                <span class="duration">{{ ticket.duration }}</span>
                <span class="capacity">{{ ticket.capacity }}</span>
              </div>
            </div>
            <p class="ticket-desc">{{ ticket.description }}</p>
            <div class="ticket-features">
              <div class="feature-item" v-for="feature in ticket.features" :key="feature">
                <span class="feature-icon">✓</span>
                <span>{{ feature }}</span>
              </div>
            </div>
            <div class="ticket-footer">
              <el-button 
                type="primary" 
                size="large"
                @click="showBookingDialog(ticket)"
                class="booking-button"
              >
                立即预约
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 预约须知弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      title="预约须知"
      width="90%"
      :show-close="true"
      class="booking-dialog"
    >
      <div class="dialog-content">
        <div class="selected-ticket-info">
          <h4>您选择的体验：{{ selectedTicket?.name }}</h4>
          <p>{{ selectedTicket?.description }}</p>
        </div>
        
        <div class="notice-list">
          <div class="notice-item">
            <span class="notice-number">1</span>
            <div class="notice-text">
              <h4>年龄限制</h4>
              <p>建议12岁以上观众参与VR体验，12岁以下儿童需成人陪同</p>
            </div>
          </div>
          <div class="notice-item">
            <span class="notice-number">2</span>
            <div class="notice-text">
              <h4>健康提醒</h4>
              <p>患有心脏病、高血压、孕妇等不适宜参与VR体验</p>
            </div>
          </div>
          <div class="notice-item">
            <span class="notice-number">3</span>
            <div class="notice-text">
              <h4>提前到场</h4>
              <p>请提前15分钟到达现场，逾期视为自动放弃</p>
            </div>
          </div>
          <div class="notice-item">
            <span class="notice-number">4</span>
            <div class="notice-text">
              <h4>特殊情况</h4>
              <p>如有特殊情况，请提前2小时联系我们：13392633089</p>
            </div>
          </div>
        </div>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button 
            type="primary" 
            @click="confirmBooking" 
            size="large"
            class="confirm-button"
          >
            确认预约
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage, ElDialog } from 'element-plus'

// 定义emit事件
const emit = defineEmits(['switchTab', 'showPersonalInfoForm'])

// 弹窗控制
const dialogVisible = ref(false)
const selectedTicket = ref(null)

// 门票数据 - 直接使用优化后的图片
const ticketList = ref([
  {
    id: 1,
    name: '《永恒的高迪·圣家堂》VR体验',
    description: '完整的高迪圣家堂VR体验，包含建筑内部探索、工作室参观体验等多个场景',
    price: 0,
    duration: '30分钟',
    capacity: '每场6人',
    badge: '免费体验',
    image: new URL('@/assets/images/HomePicture.jpg', import.meta.url).href,
    features: [
      '360度全景VR体验',
      '多场景互动探索',
      '专业设备提供',
      '现场技术指导'
    ]
  }
])

// 显示预约弹窗
const showBookingDialog = (ticket) => {
  selectedTicket.value = ticket
  dialogVisible.value = true
}

// 确认预约
const confirmBooking = () => {
  dialogVisible.value = false
  
  ElMessage.success('请选择场次完成预约')
  
  // 直接跳转到票务选择页面
  setTimeout(() => {
    emit('switchTab', 'ticket')
  }, 500)
}

// 门票图片加载事件处理
const onTicketImageLoad = (ticketId) => {
  console.log(`门票图片 ${ticketId} 加载完成`)
}

const onTicketImageError = (ticketId) => {
  console.error(`门票图片 ${ticketId} 加载失败`)
}
</script>

<style scoped>
@import '../assets/css/booking/gallery.css';
</style> 